import React from 'react';
import '../assets/styles/Cons.css';


class Auto extends React.Component{
    constructor(props){
        super(props);
        this.state={
            picNo:['0px','-600px','-1200px','-1800px'],
            picNow: "",
            No: 0,
        }

        this.out = this.out.bind(this);
        this.over = this.over.bind(this);

        this.tick_right = this.tick_right.bind(this);
        this.tick_left = this.tick_left.bind(this);
    }

    componentDidMount(){
        this.timer=setInterval(
            ()=>this.tick_right(),
            5000
        );
    }

    componentWillUnmount(){
        clearInterval(this.timer);
    }

    tick_right(){
        switch(this.state.No){
            case 0:
                this.setState({
                    No: 1
                });
                break;
            
            case 1:
                this.setState({
                    No: 2
                });
                break;
            
            case 2:
                this.setState({
                    No: 3
                });
                break;
            
            case 3:
                this.setState({
                    No: 0
                });
                break;
            
            default:
                break;
        }

        this.setState({
            picNow: this.state.picNo[this.state.No]
        })
    }

    tick_left(){
        switch(this.state.No){
            case 0:
                this.setState({
                    No: 3
                });
                break;
            
            case 1:
                this.setState({
                    No: 0
                });
                break;
            
            case 2:
                this.setState({
                    No: 1
                });
                break;
            
            case 3:
                this.setState({
                    No: 2
                });
                break;
            
            default:
                break;
        }

        this.setState({
            picNow: this.state.picNo[this.state.No]
        })
    }    

    over(){
        clearInterval(this.timer);
    }

    out(){
        this.timer=setInterval(
            ()=>this.tick_right(),
           5000
        );            
    }

    render(){
        return(
            <div className="bdhuse" onMouseOut={this.out} onMouseOver={this.over}>

                <div className="mid" style={{left:this.state.picNo[this.state.No]}}>
                    <div className="pic1"></div>
                    <div className="pic2"></div>
                    <div className="pic3"></div>
                    <div className="pic4"></div>
                </div>
                <div className="shift_block">
                    <div className="left" onClick={this.tick_left}></div>
                    <div className="right" onClick={this.tick_right}></div>
                </div>
            </div>
        );
    }
}

export default Auto;
